<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '停车场详细',
  },
}
</route>

<template>
  <view class="detail-container">
    <!-- 地图区域使用粘性布局 -->
    <wd-sticky :offset-top="0">
      <view class="map-box">
        <map
          id="mapUni"
          ref="mapRef"
          class="map-uni"
          :latitude="center.latitude"
          :longitude="center.longitude"
          :scale="16"
          :markers="markers"
          show-location
          style="width: 100%; height: 500rpx; border-radius: 0 0 12rpx 12rpx"
        />
      </view>
    </wd-sticky>
    <view class="content-scroll">
      <!-- 基本信息 -->
      <view class="info-list">
        <wd-cell-group>
          <wd-cell icon="location" :title="lotInfo.name" />
          <wd-cell icon="location" :title="lotInfo.address" />
          <wd-cell icon="clock" :title="lotInfo.is_allday ? '全天营业' : '白天营业'" />
          <wd-cell icon="user" :title="`总位置：${lotInfo.total_spaces}个`" />
          <wd-cell icon="user" :title="`当前剩余：${lotInfo.available_spaces}个`" />
        </wd-cell-group>
      </view>
      <!-- 收费标准 -->
      <view class="section">
        <view class="section-title">收费标准</view>
        <view class="section-content">
          <view>{{ feeMode }}</view>
          <view v-if="lotInfo.base_fee !== 0">{{ priceMode }}</view>
        </view>
      </view>
      <!-- 车位信息 -->
      <view class="section">
        <view class="section-title flex-between">
          <text>车位信息</text>
          <wd-drop-menu>
            <wd-drop-menu-item v-model="filterValue" :options="option" placeholder="筛选" />
          </wd-drop-menu>
        </view>
        <CarList :list="parkingList" @itemClick="handleParkingClick" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import CarList from './components/car-list.vue'

import { detailUsingGet1 } from '@/api/parkingLotController'
import { listUsingGet4 } from '@/api/parkingSpaceController'
import { tingchechangxiangqingVo, tingcheweiliebiaoVo } from '@/api/types'

const lotInfo = ref<tingchechangxiangqingVo>({})

const feeMode = computed<string>(() => {
  const value = lotInfo.value.fee_model
  if (value === 0) return '免费'
  else if (value === 1) return '按次'
  else return '按时'
})

const priceMode = computed(() => {
  const value = lotInfo.value.fee_model
  if (value === 0) return null
  else if (value === 1) return lotInfo.value.base_fee + '元/次'
  else return lotInfo.value.hourly_rate + '元/小时'
})

const option = ref<Record<string, any>[]>([
  { label: '全部车位', value: 3 },
  { label: '已占用', value: 0 },
  { label: '空闲', value: 1 },
])
const filterValue = ref(3)
const parkingListRaw = ref<Array<tingcheweiliebiaoVo>>([])
const parkingList = computed(() => {
  if (filterValue.value === 3) {
    return parkingListRaw.value
  } else {
    return parkingListRaw.value.filter((i) => i.is_disable === filterValue.value)
  }
})

const selectedParkingId = ref<number | null>(null)
let blinkTimer: any = null

const center = ref({
  latitude: parkingList.value.length > 0 ? parkingList.value[0].latitude : 31.2304,
  longitude: parkingList.value.length > 0 ? parkingList.value[0].longitude : 121.4737,
})

const updateCenter = (item: any) => {
  center.value = {
    latitude: item.latitude,
    longitude: item.longitude,
  }
}

const markers = computed(() =>
  parkingList.value.map((item) => {
    let iconPath = item.is_disable === 1 ? '/static/car/free.png' : '/static/car/busy.png'
    // 闪烁效果：选中车位时切换iconPath
    if (item.id === selectedParkingId.value && blinkState.value) {
      iconPath = '/static/car/choose.png'
    }
    return {
      id: item.id,
      latitude: item.latitude,
      longitude: item.longitude,
      width: 40,
      height: 40,
      iconPath,
      callout: {
        content: `${item.floor + '-' + item.zone + '-' + item.code}`,
        color: item.is_disable === 1 ? '#2ecc71' : '#999',
        fontSize: 14,
        display: 'ALWAYS',
        borderRadius: 6,
        bgColor: '#fff',
        padding: 4,
        borderWidth: 1,
        borderColor: '#eee',
        textAlign: 'center',
      } as any,
    }
  }),
)

const blinkState = ref(false)
let mapContext: any = null
const mapRef = ref()

onMounted(() => {
  mapContext = uni.createMapContext('mapUni', null)
})

const handleParkingClick = (item: any) => {
  selectedParkingId.value = item.id
  updateCenter(item)
  if (mapContext) {
    mapContext.moveToLocation({
      latitude: item.latitude,
      longitude: item.longitude,
    })
  }
  // 开始闪烁效果
  if (blinkTimer) clearInterval(blinkTimer)
  blinkState.value = true
  let count = 0
  blinkTimer = setInterval(() => {
    blinkState.value = !blinkState.value
    count++
    if (count > 5) {
      // 闪烁3次
      clearInterval(blinkTimer)
      blinkState.value = false
    }
  }, 500)
}

const getLotDetail = async (id: number) => {
  const res = await detailUsingGet1({ params: { id } })
  const data: tingchechangxiangqingVo = res.data
  lotInfo.value = data
}

const getParkingList = async (id: number) => {
  const res = await listUsingGet4({ params: { parkingLotId: id } })
  parkingListRaw.value = res.data
}
onLoad((options) => {
  console.log('停车场id:', options.id)
  const parkingId = options.id
  getLotDetail(parkingId)
  getParkingList(parkingId)
})
</script>

<style lang="scss" scoped>
.detail-container {
  min-height: 100vh;
  background: #f8f8f8;
}
.map-box {
  width: 100vw;
  background: #fff;
}
.content-scroll {
  padding-bottom: 20px;
  margin-top: 0;
}
.info-list {
  margin: 20rpx 0;
}
.section {
  padding: 24rpx;
  margin: 20rpx 0;
  background: #fff;
  border-radius: 12rpx;
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    font-size: 30rpx;
    font-weight: bold;
    &.flex-between {
      justify-content: space-between;
    }
  }
  .section-content {
    font-size: 26rpx;
    line-height: 1.8;
    color: #666;
  }
}
.parking-list {
  margin-top: 10rpx;
}
.parking-card {
  padding: 18rpx 20rpx;
  margin-bottom: 16rpx;
  background: #f7f8fa;
  border-radius: 8rpx;
}
.parking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.parking-title {
  font-size: 28rpx;
  font-weight: 500;
}
.parking-desc,
.parking-distance {
  margin-bottom: 2rpx;
  font-size: 24rpx;
  color: #888;
}
</style>
